<template>
  <transition name="slide-up">
    <div class="head">
      <div class="fileName">
        <!-- <span class="logo"></span> -->
        <span class="name" :title="componentInfoHeader.curName">{{componentInfoHeader.curName}}</span>
      </div>
      <div class="headBtn" v-show="!componentInfoHeader.showVersionInfo">
        <span
          v-show="componentInfoHeader.abandonBtnShow"
          class="saveBtn"
          @click="backdownMedal"
        >重新认证</span>
        <!-- <span v-show="componentInfoHeader.saveBtnShow" class="saveBtn no_select" @click="save">保存</span> -->
        <span class="saveBtn submitBtn" @click="previewBack">返回</span>
        <span
          v-show="componentInfoHeader.repulseBtnShow"
          class="saveBtn warnBtn"
          @click="repulseMark"
        >打回</span>
        <!-- <span
          v-show="!componentInfoHeader.isRecheck && componentInfoHeader.submitBtnShow"
          class="saveBtn submitBtn no_select"
          @click="submit"
        >提交</span>-->
        <a class="saveBtn submitBtn" v-show="componentInfoHeader.closeBtnShow" @click="close()">关闭</a>
      </div>
      <div class="headBtn" v-show="componentInfoHeader.showVersionInfo">
        <span class="saveBtn" @click="closeVersion">返回</span>
        <span class="saveBtn submitBtn" @click="recoverVersion">恢复到该版本</span>
      </div>
      <div class="info preview">
        <!-- <span class="history theme" @click="changeTheme"></span> -->
        <span class="shortcut cut no_select" v-if="componentInfoHeader.shortcutBtnShow">
          快捷键
          <b style="margin-left: 10px;color: #e2e2e2;">|</b>
          <div class="showBox" style="color: #000;">
            <div class="table">
              <div v-for="item in componentInfoHeader.shortcutkeys" :key="item.key">
                <span v-html="item.key"></span>
                <span>
                  <i v-html="item.value"></i>
                </span>
              </div>
            </div>
          </div>
        </span>
        <span class="shortcut rule no_select" v-if="componentInfoHeader.standardBtnShow">
          标注规范
          <b style="margin-left: 10px;color: #e2e2e2;">|</b>
          <div class="showBox">
            <div class="box" v-html="componentInfoHeader.standardCnt"></div>
          </div>
        </span>
        <span
          class="history no_select"
          @click="showHistory"
          v-if="componentInfoHeader.historyBtnShow"
        >历史</span>
      </div>
      <i style="margin-top:5px;float:right;cursor:pointer;" @click="robot()">
        <!-- <img style="display:inline-block;" src="@/assets/images/common/客服.svg" alt /> -->
      </i>
    </div>
  </transition>
</template>
<script>
export default {
  name: 'Header',
  data () {
    return {};
  },
  props: {
    componentInfoHeader: {
      type: Object,
      default: () => ({})
    }
  },
  created: function () { },
  mounted () { },
  methods: {
    previewBack () {
      this.$router.go(-1)
    },
    robot: function () {
      var url = '/open/robot';
      window.open(url);
    },
    save: function () {
      this.$emit('save');
    },
    submit: function () {
      this.$emit('submit');
    },
    showHistory () {
      this.$emit('showHistory');
    },
    changeTheme: function () {
      this.$emit('changeTheme');
    },
    closeVersion: function () {
      this.$emit('closeVersion');
    },
    recoverVersion: function () {
      this.$emit('recoverVersion');
    },
    repulseMark: function () {
      this.$emit('repulseMark');
    },
    backdownMedal: function () {
      this.$emit('backdown');
    },
    close () {
      window.close()
    }
  },
  beforeDestroy () { }
};
</script>
<style lang="less">
.head {
  height: 50px;
  width: 100%;
  min-width: 1366px;
  padding: 0 20px;
  border: 1px solid #c5cccb;
  overflow: hidden;
  background: #fff;
  box-sizing: border-box;
  .preview {
    opacity: 0.4;
  }
  .no_select {
    cursor: no-drop;
  }
  &:hover {
    overflow: visible;
  }
  .fileName {
    width: 680px;
    float: left;
    line-height: 50px;
    .logo {
      display: inline-block;
      float: left;
      width: 40px;
      height: 50px;
      background-image: url(' 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');
      background-repeat: no-repeat;
      background-position: left;
    }
    .name {
      display: inline-block;
      text-align: left;
      float: left;
      width: 460px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      font-weight: bold;
      font-size: 16px;
    }
  }
  .info {
    // width: 240px;
    padding: 0 8px;
    float: right;
    line-height: 50px;
    text-align: center;
    & > span {
      display: inline-block;
      /*width: 60px;*/
      margin-right: 10px;
    }
  }
  .headBtn {
    /*width: 350px;*/
    float: right;
    text-align: right;
  }
  .theme {
    display: inline-block;
    width: 20px;
    height: 14px;
    position: relative;
    top: 2px;
    background: url('')
      no-repeat center center;
  }
}
.head.slide-up-leave-active:hover,
.head.slide-up-enter-active {
  overflow: hidden;
}
.hide {
  overflow: hidden;
}
.saveBtn {
  display: inline-block;
  background: #ffffff;
  border: 1px solid #bdbdbd;
  border-radius: 2px;
  /*width: 100px;*/
  padding: 0 26px;
  height: 28px;
  text-align: center;
  line-height: 28px;
  cursor: pointer;
  margin-top: 11px;
  margin-left: 10px;
  /*float: right;*/
}
.submitBtn {
  background: #3b98f2;
  border: 1px solid #3b98f2;
  color: #fff;
}
.warnBtn {
  background: #ff6750;
  color: #fff;
  border: 1px solid #ff6750;
}
/*快捷键*/
.shortcut {
  position: relative;
  cursor: pointer;
  word-break: break-word;
  &:hover .showBox {
    display: block;
  }
  .showBox {
    position: absolute;
    background: #fff;
    width: 300px;
    padding: 10px;
    -webkit-box-shadow: 0 0 10px rgba(155, 155, 155, 0.5);
    -moz-box-shadow: 0 0 10px rgba(155, 155, 155, 0.5);
    -ms-box-shadow: 0 0 10px rgba(155, 155, 155, 0.5);
    -o-box-shadow: 0 0 10px rgba(155, 155, 155, 0.5);
    box-shadow: 0 0 10px rgba(155, 155, 155, 0.5);
    z-index: 999;
    border-radius: 3px;
    top: 50px;
    transform: translateX(-85%);
    display: none;
    &:before {
      content: '';
      position: absolute;
      top: -14px;
      right: 38px;
      border-width: 7px;
      border-style: dashed dashed solid dashed;
      border-color: transparent transparent #fff transparent;
      font-size: 0;
      line-height: 0;
    }
    .box {
      background-color: #fff;
    }
  }
}

.history {
  cursor: pointer;
}
/*.showBox table{*/
/*width: 100%;*/
/*line-height: 20px;*/
/*}*/
.shortcut .showBox .table {
  width: 100%;
  max-height: 180px;
  overflow: auto;
}

.shortcut .showBox .table div:after {
  content: '';
  display: table;
  clear: both;
}

.cut {
  .showBox {
    transform: translateX(-78%);
    padding: 0 10px;
    .table span {
      display: inline-block;
      width: 50%;
      float: left;
      text-align: center;
      line-height: 40px;
    }
    .table span i {
      display: inline-block;
      padding: 3px 10px;
      background-image: linear-gradient(-180deg, #f0f0f0 0%, #e2e2e2 100%);
      border-radius: 2px;
      height: 20px;
      line-height: 15px;
      font-size: 12px;
    }
  }
}
.rule {
  color: #000;
  line-height: 20px;
  text-align: left;
  line-height: 50px;
  height: 50px;
  .showBox {
    line-height: 20px;
    max-height: 200px;
    width: 500px;
    .box {
      max-height: 180px;
      padding: 10px 0;
      overflow: hidden;
      img {
        width: 100%;
      }
    }
  }
}
p {
  margin: 0;
}
</style>
